<template>
  <div class="demo-container">
    <OpenlayerMap :showPanel="true" :area="area" :line="line"></OpenlayerMap>
  </div>
</template>

<script setup>
import OpenlayerMap from "@/components/openlayer/openlayer.vue";

let area = [
  {
    id: 1,
    polygon: [
      [
        [117.76539322860397, 39.033600999852275],
        [117.72481595912116, 39.02303400259113],
        [117.74468191397212, 38.96850829672361],
        [117.77722826553645, 38.990064971136356],
        [117.77596022586512, 39.00570412708285],
        [117.76539322860397, 39.033600999852275],
      ],
    ],
  },
  {
    id: 2,
    polygon: [
      [
        [117.7137435072634, 39.10148664830954],
        [117.68997182368796, 39.08765997379854],
        [117.7064386142226, 39.05654879870957],
        [117.7343296067936, 39.07032998430354],
        [117.7137435072634, 39.10148664830954],
      ],
    ],
  },
];

let line = [
  {
    id: 1,
    line: [
      [117.76539322860397, 39.033600999852275],
      [117.72481595912116, 39.02303400259113],
      [117.74468191397212, 38.96850829672361],
    ],
  },
  {
    id: 2,
    line: [
      [117.7137435072634, 39.10148664830954],
      [117.68997182368796, 39.08765997379854],
      [117.7064386142226, 39.05654879870957],
    ],
  },
];
</script>

<style>
.demo-container {
  width: 100%;
  height: 100vh;
}
</style>
